/*!
 * Web Cabin Docker - Docking Layout Interface.
 *
 * Dependancies:
 *  JQuery 1.11.1
 *
 * Version: git-master
 *
 * Author: Jeff Houde (lochemage@webcabin.org)
 * Web: http://docker.webcabin.org/
 *
 * Licensed under
 *   MIT License http://www.opensource.org/licenses/mit-license
 *   GPL v3 http://opensource.org/licenses/GPL-3.0
 *
 */

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    margin: 0px;
}

.wcDisableSelection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.wcModalBlocker {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -30;
}

.wcWide {
    width: 100%;
    left: 0px;
}

.wcTall {
    height: 100%;
    top: 0px;
}

.wcDocker {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wcDockerTransition {
    opacity: 0;
}

.wcFrame {
    position: relative;
    /*overflow: hidden;*/
}

.wcFrameFlasher,
.wcFrameShadower {
    border: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
}

.wcFrameTitleBar {
    width: 100%;
    cursor: move;
    overflow: hidden;
    position: absolute;
    text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.wcFrameTitle {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.wcFrameTitleBar.wcNotMoveable {
    cursor: default;
}

.wcCustomTabTitle {
    cursor: default !important;
    margin-top: 2px;
}

.wcCustomTabMoveable {
    cursor: move !important;
}

.wcCustomTab {
    position: relative;
}

.wcTabScroller {
    height: 100%;
    width: 10000px;
    position: relative;
}

.wcFrameButtonBar {
    position: absolute;
    top: 0px;
    right: 0px;
    width: auto !important;
    color: #fff;
}

.wcFrameButton {
    position: relative;
    float: right;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    box-sizing: content-box;
}

.wcFrameButton>div {
    width: 100%;
}

.wcButton {
    box-sizing: content-box;
}

.wcFrameCenter {
    overflow: hidden;
    position: absolute;
    top: 15px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.wcFloating {
    position: fixed;
}

.wcFloatingFocus {}

.wcModal {}

.wcLayout,
.wcLayout tr,
.wcLayout td {
    border: 0px;
    margin: 0px;
    padding: 0px;
    border-spacing: 0px;
}

.wcLayout {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    position: absolute;
}

.wcFrameEdge {
    position: absolute;
    z-index: 2;
    border: 2px outset #444;
    background-color: #222;
}

.wcFrameEdgeV {
    width: 2px;
    cursor: ew-resize;
    border-top: 0px;
    border-bottom: 0px;
}

.wcFrameEdgeH {
    height: 2px;
    cursor: ns-resize;
    border-left: 0px;
    border-right: 0px;
}

.wcFrameCornerNW {
    height: 2px;
    width: 2px;
    cursor: nwse-resize;
}

.wcFrameCornerNE {
    height: 2px;
    width: 2px;
    cursor: nesw-resize;
}

.wcSplitterBar {
    z-index: 2;
    position: absolute;
    border: 1px outset darkgray;
}

.wcSplitterBarV {
    width: 2px;
    height: 100%;
    cursor: ew-resize;
}

.wcSplitterBarH {
    height: 2px;
    width: 100%;
    cursor: ns-resize;
}

.wcSplitterHidden {
    width: 0px !important;
    border: 0px !important;
    display: none !important;
}

.wcSplitterBarV.wcSplitterBarStatic {
    cursor: default !important;
}

.wcSplitterBarH.wcSplitterBarStatic {
    cursor: default !important;
}

.wcLayoutPane {
    border: 0px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    position: absolute;
}

.wcPanelTab {
    vertical-align: top;
    position: relative;
    display: inline-block;
    cursor: move;
    top: 0px;
}

.wcPanelTab.wcNotMoveable {
    cursor: default;
}

.wcTabLeft {
    -webkit-transform: rotate(-90deg) scaleX(-1);
    -ms-transform: rotate(-90deg) scaleX(-1);
    -moz-transform: rotate(-90deg) scaleX(-1);
    -o-transform: rotate(-90deg) scaleX(-1);
    transform: rotate(-90deg) scaleX(-1);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    top: 0%;
    left: 0%;
}

.wcTabLeft .wcFrameButton {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcTabLeft .wcFrameButton span {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcTabLeft .wcPanelTab>div {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

.wcTabRight {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    top: 0px;
    left: 100%;
}

.wcTabRight .wcFrameButton {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcTabRight .wcFrameButton span {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcTabBottom {
    -webkit-transform: rotate(180deg) scaleX(-1);
    -ms-transform: rotate(180deg) scaleX(-1);
    -moz-transform: rotate(180deg) scaleX(-1);
    -o-transform: rotate(180deg) scaleX(-1);
    transform: rotate(180deg) scaleX(-1);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    top: 100%;
    left: 0px;
}

.wcTabBottom .wcFrameButton {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcTabBottom .wcFrameButton span {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcTabBottom .wcPanelTab>div {
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}

.wcCollapseLeft.wcCollapsible,
.wcCollapseRight.wcCollapsed {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcCollapseBottom.wcCollapsible {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcCollapseBottom.wcCollapsed {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

.wcPanelTabContent {
    width: 100%;
    height: 100%;
}

.wcPanelTabContent.wcPanelTabContentHidden {
    display: none;
}

.wcResizing .wcHideOnResize .wcPanelTabContent {
    display: none;
}

.wcGhost {
    opacity: 0.0;
    position: fixed;
    z-index: 100;
    cursor: move;
}

.wcScrollableX {
    overflow-x: auto;
}

.wcScrollableY {
    overflow-y: auto;
}

.wcOverflowVisible {
    overflow: visible;
}

.wcTabIcon {
    display: inline-block;
    text-align: center;
}

.wcMenuIcon {
    display: inline-block;
    text-align: center;
}

.fa-menu {
    margin-left: -24px;
    width: 24px;
}

.context-menu-submenu:after {
    content: '' !important;
}

.wcMenuSubMenu {
    position: absolute;
    right: 3px;
    top: 3px;
}

.wcIFrame,
.wcIFrame iframe {
    position: absolute;
    overflow: auto;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.wcIFrameFocus {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
    display: none;
}

.wcDisableSelection .wcIFrameFocus {
    display: block;
}

.wcDisableSelection .wcIFrameFocus {
    display: block;
}

.wcIFrame.wcDrawer {
    z-index: 6;
}

.wcIFrameFloating {
    /*z-index: 11;*/
}

.wcIFrameFloatingFocus {
    /*z-index: 21;*/
}

.wcIFrameHidden,
.wcIFramePanelHidden {
    display: none;
}

.wcIFrameMoving {
    pointer-events: none;
}

.wcCollapserFrame {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wcDrawer {
    z-index: 5;
}

.wcCreatePanel {
    cursor: move;
}

.wcLoadingContainer,
.wcLoadingBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.wcLoadingContainer {
    z-index: 10;
}

.wcLoadingIconContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

.wcLoadingIcon {
    position: absolute;
    font-size: 200px;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    height: 195px;
}

.wcLoadingLabel {
    position: absolute;
    width: 100%;
    font-size: 100px;
    top: calc(50% + 100px);
    text-align: center;
}

.wcFullSized {
    width: 100% !important;
    height: 100% !important;
}

.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8);
}

.wcAttributeLabel {
    white-space: nowrap;
    padding-right: 10px;
    text-align: right;
}

.wcAttributeControl {
    width: 100%;
}

.wcAttributeSpacer,
.wcAttributeSpacerSolid {
    width: 100%;
    height: 22px;
    text-align: center;
    margin-top: 3px;
    margin-bottom: 3px;
}

.wcAttributeSpacerSolid {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
}